<template>
  <view>
    <!-- 用户信息开始 -->
    <view class="user_info_warper">
      <view v-if="userInfo" class="user_img_warper">
        <image class="user_bg" :src="userInfo.avatarUrl" mode="aspectFill"></image>
        <view class="user_info">
          <image :src="userInfo.avatarUrl" mode="widthFix"></image>
          <view class="user_nickname">{{ userInfo.nickName }}</view>
        </view>
      </view>
      <view v-else class="user_login_warper">
        <!-- 登录 -->
        <button class="btn_login" type="primary" open-type="getUserInfo" @tap="getUserInfo">登录</button>
      </view>
    </view>
    <!-- 用户信息结束 -->
    <!-- 用户内容开始 -->
    <view class="user_content">
      <view class="history_warper">
        <navigator class="history_item" open-type="navigate" url="">
          <view class="history_num">0</view>
          <view class="history_text">收藏的店铺</view>
        </navigator>
        <navigator class="history_item" open-type="navigate" url="../collect/collect">
          <view class="history_num">{{shouCangNum}}</view>
          <view class="history_text">收藏的商品</view>
        </navigator>
        <navigator class="history_item" open-type="navigate" url="">
          <view class="history_num">0</view>
          <view class="history_text">关注的商品</view>
        </navigator>
        <navigator class="history_item" open-type="navigate" url="">
          <view class="history_num">0</view>
          <view class="history_text">我的足迹</view>
        </navigator>
      </view>
      <view class="order_warper">
        <view class="order_title">我的订单</view>
        <view class="order_row">
          <navigator class="order_item" open-type="navigate" url="../order/order?type=1">
            <view class="order_icon iconfont icon-order"></view>
            <view class="order_text">全部订单</view>
          </navigator>
          <navigator class="order_item" open-type="navigate" url="../order/order?type=2">
            <view class="order_icon iconfont icon-daifukuan"></view>
            <view class="order_text">待付款</view>
          </navigator>
          <navigator class="order_item" open-type="navigate" url="../order/order?type=3">
            <view class="order_icon iconfont icon-daishouhuo01"></view>
            <view class="order_text">待收货</view>
          </navigator>
          <navigator class="order_item" url="">
            <view class="order_icon iconfont icon-tuikuan"></view>
            <view class="order_text">退款/退货</view>
          </navigator>
        </view>
      </view>
      <view class="addres_warper">收货地址管理</view>
      <view class="app_info_warper">
        <view class="app_info_item">
          <!-- item内容 -->
          <view class="info_left">联系客服</view>
          <view class="info_right">400-618-4000</view>
        </view>
        <view class="app_info_item">
          <!-- item内容 -->
          <view class="info_left">意见反馈</view>
        </view>
        <view class="app_info_item">
          <!-- item内容 -->
          <view class="info_left">关于我们</view>
        </view>
      </view>
      <view class="recommed_app_warper">
        <!-- 内容 -->
        把应用推荐给其他人
      </view>
    </view>
    <!-- 用户内容结束 -->
  </view>
</template>

<script>
import regeneratorRuntime from '../../lib/runtime/runtime.js';
import { request } from '../../request/request.js';
import { uniGetUserInfo } from '../../utils/utils.js';

export default {
  onShow() {
    var _me = this;
    // 从缓存拿数据
    var userInfo = uni.getStorageSync('userInfo');
    _me.userInfo = userInfo;
    var shouCang = uni.getStorageSync('shoucang') || [];
    _me.shouCangNum = shouCang.length
  },
  data() {
    return {
      userInfo: {},
      shouCangNum:0
    };
  },
  methods: {
    async getUserInfo() {
      var _me = this;
      try {
        // #ifndef H5
        var res = await uniGetUserInfo();
        console.log(res);
        _me.userInfo = res.userInfo;
        // #endif

        // ！！！H5平台不支持登录
        // #ifdef H5
        _me.userInfo = {
          avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKs57XQXP2ic3zicdchoyNyZCL1IZnmHkyEGDm11iaib2cAialFjkrxmqibLzia527rGmGlxRyY4AMic4Cc1A/132',
          city: 'Anyang',
          country: 'China',
          gender: 1,
          language: 'zh_CN',
          nickName: 'ZL_ZhangLang',
          province: 'Henan'
        };
        // #endif
        
        // ！！！阿里平台不支持登录
        // #ifdef MP-ALIPAY
        _me.userInfo = {
          avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKs57XQXP2ic3zicdchoyNyZCL1IZnmHkyEGDm11iaib2cAialFjkrxmqibLzia527rGmGlxRyY4AMic4Cc1A/132',
          city: 'Anyang',
          country: 'China',
          gender: 1,
          language: 'zh_CN',
          nickName: 'ZL_ZhangLang',
          province: 'Henan'
        };
        // #endif
        console.log(_me.userInfo);
        uni.setStorageSync('userInfo', _me.userInfo);
      } catch (error) {
        //TODO handle the exception
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss">
/* 用户信息开始 */
.user_info_warper {
  position: relative;
  height: 500rpx;
  background-color: $themeColor;
  .user_img_warper {
    width: 100%;
    height: 100%;
    .user_bg {
      width: 100%;
      height: 100% !important;
      filter: blur(10rpx);
    }
    .user_info {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 200rpx;
        height: 200rpx !important;
        border-radius: 50%;
        border: 2rpx solid #666666;
      }
      .user_nickname {
        margin-top: 30rpx;
      }
    }
  }
  .user_login_warper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn_login {
      width: 200rpx;
      border-width: 2rpx;
      border-style: solid;
    }
  }
}
/* 用户信息结束 */
/* 用户内容开始 */
.user_content {
  background-color: #f4f4f4;
  padding: 10rpx;
  color: #666666;
  .history_warper {
    margin: 10rpx;
    padding: 20rpx 10rpx;
    background-color: #ffffff;
    display: flex;
    .history_item {
      height: 120rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      .history_num {
        color: $themeColor;
      }
      .history_text {
        
      }
    }
  }
  .order_warper {
    margin: 10rpx;
    padding: 10rpx;
    background-color: #ffffff;
    .order_title {
      padding: 10rpx 0rpx;
      border-bottom: 4rpx solid #e4e4e4;
    }
    .order_row {
      display: flex;
      .order_item {
        height: 120rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        .order_icon {
          color: $themeColor;
          font-size: 50rpx;
          font-weight: bolder;
        }
        .order_text {
          
        }
      }
    }
  }
  .addres_warper {
    margin: 10rpx;
    padding: 10rpx;
    background-color: #ffffff;
    font-size: 32rpx;
  }
  .app_info_warper {
    margin: 10rpx;
    padding: 10rpx 0rpx;
    background-color: #ffffff;
    .app_info_item {
      display: flex;
      padding: 10rpx;
      justify-content: space-between;
      font-size: 32rpx;
      border: {
        top: 2rpx solid #e4e4e4;
        bottom: 2rpx solid #e4e4e4;
      }
      margin-top: -2rpx;
    }
  }
  .recommed_app_warper{
    margin: 10rpx;
    padding: 10rpx;
    background-color: #ffffff;
    font-size: 32rpx;
  }
}
/* 用户内容结束 */
</style>
